<template>
  <div class="order">
    <el-row :gutter="10" class="mb8">
         <el-form
            label-position="left"
        >
            <el-form-item label="交易状态">
                <el-col :span="1.5">
                    <el-select v-model="queryParams.transac_status" placeholder="请选择结账状态" style="width: 240px">
                        <el-option
                            v-for="item in checkoutStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-col>
            </el-form-item>
        </el-form>

         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Search"
               @click="handleQuery"
            >查询</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-badge :value="orderNum" class="item">
                <el-button>订单数量</el-button>
            </el-badge>
         </el-col>
    </el-row>

    <!-- 表格数据 -->
      <el-table v-loading="loading" :data="orderList">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="桌号" prop="table_number" :show-overflow-tooltip="true" />
         <el-table-column label="交易时间" prop="order_time" :show-overflow-tooltip="true" />
         <el-table-column label="用餐人数" prop="number_of_diners" :show-overflow-tooltip="true" />
         <el-table-column label="菜单详情" >
            <template  #default="scope">
               <el-tag type="success" @click="getOrderDetailList(scope.row._id)">订单详情</el-tag>
            </template>
         </el-table-column>
         <el-table-column label="交易金额" prop="sett_amount" :show-overflow-tooltip="true" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
                <el-button type="danger" @click="handleShelves(scope.row)" v-if="scope.row.order_receiving === 'mis_orders'" >待接单</el-button>
                <el-button type="warning" @click="handleCheckout(scope.row)" v-if="scope.row.transac_status === 'unsettled'" >待结账</el-button>
                 <el-button type="success" v-if="scope.row.transac_status === 'success'" >已结账</el-button>
            </template>
         </el-table-column>
      </el-table>
      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.page"
         v-model:limit="queryParams.limit"
         @pagination="getOrderList"
        
      />

    <el-dialog
        title="菜单详情"
        v-model="dialogVisible"
        width="30%">
        <div class="menu_box" v-for="(item,index) in menuList" :key="index">
            <div class="menu_box_title">第{{index+1}}点餐</div>
            <div class="menu_box_main" v-for="(t,i) in item.goods_list" :key="i">
                <div class="menu_box_main_left">{{t.name}}</div>
                <div class="menu_box_main_right">{{t.quantity}}</div>
            </div>
        </div>
    </el-dialog>




  </div>
</template>

<script setup>
// BC-b3ced4c51c5d499d9d90d3c9e23fdcac
// https://diancan-1252107261.cos.accelerate.myqcloud.com/mp3/dingdantixing.mp3
import { ref, onMounted, watch } from 'vue'
import { OrderDetail, OrderDetailList, OrderDetailAccept, OrderDetailCheckout } from '@/api/order'
const { proxy } = getCurrentInstance();
const value = ref('')
const total = ref(0)
const orderList = ref([])
const menuList = ref([])
const loading = ref(false)
const dialogVisible = ref(false)
const orderNum = ref()
const checkoutStatus = ref([
    {
    value: 'success',
    label: '已结账',
  },
  {
    value: 'unsettled',
    label: '未结账',
  },
])
const queryParams = ref({
    page: 1,
    limit: 10,
    transac_status:''
})

const handleQuery = () => {
    getOrderList()
}

const getOrderList = () => {
    loading.value = true
    OrderDetail(queryParams.value).then(res => {
        console.log(res);
        let { list } = res.data
        loading.value = false
        orderList.value = list
        total.value = res.data.total
    })
}

const getOrderDetailList = async (id) => {
    const params = { id }
    const res = await OrderDetailList(params)
    const { menu } = res.data
    dialogVisible.value = true
    menuList.value = menu

}
// 结账
const handleCheckout = async (row) => {
    const params = { 
        id: row._id,
        openid:row._openid,
        order_no:row.order_no,
        sett_amount:row.sett_amount 
    }
    const res =  await OrderDetailCheckout(params)
    const { data, code, msg } =  res
    if(code === 200) {
         proxy.$modal.msgSuccess(`${msg}`)
         getOrderList()
    }else {
        proxy.$modal.msgError(`${msg}`)
    }
}


// 接单
const handleShelves = async (row) => {
    const params = { id: row._id }
    const res =  await OrderDetailAccept(params)
    const { data, code, msg } =  res
    if(code === 200) {
         proxy.$modal.msgSuccess(`${msg}`)
         getOrderList()
    }else {
        proxy.$modal.msgError(`${msg}`)
    }
}
onMounted(() => {
    getOrderList()
    orderNum.value = localStorage.getItem('order_num') || 0
})
// watch(orderNum,(new))
</script>

<style lang="scss" scoped>
.order {
    padding: 20px;
}
.menu_box {
    padding: 20px;
    .menu_box_title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 10px;
        color:#000;
    }
    .menu_box_main {
        display: flex;
        font-size: 16px;
        color:#ccc;
        .menu_box_main_right {
            margin-left: auto;
        }
    }
}
</style>